<template>
  <div class="terms-page">
    <!-- 顶部横幅 -->
    <div class="terms-banner">
      <div class="banner-content">
        <h1>服务条款</h1>
        <p>请仔细阅读以下条款，这些条款规定了您使用我们服务的权利和义务。</p>
      </div>
      <div class="banner-waves">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28">
          <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="wave-group">
            <use href="#wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
            <use href="#wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use href="#wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use href="#wave" x="48" y="7" fill="rgba(255,255,255,0.1)" />
          </g>
        </svg>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="terms-content">
      <aside class="terms-sidebar">
        <nav class="terms-nav">
          <div v-for="(section, index) in sections" 
               :key="index"
               class="nav-item"
               :class="{ active: currentSection === index }"
               @click="scrollToSection(index)">
            {{ section.title }}
          </div>
        </nav>
      </aside>

      <main class="terms-main">
        <div v-for="(section, index) in sections" 
             :key="index"
             :id="'section-' + index"
             class="terms-section">
          <h2>{{ section.title }}</h2>
          <div class="section-content" v-html="section.content"></div>
        </div>
      </main>

      <aside class="terms-actions">
        <div class="action-card">
          <h3>需要帮助？</h3>
          <p>如果您对服务条款有任何疑问，请联系我们的支持团队。</p>
          <button @click="contactSupport">
            <i class="fas fa-headset"></i>
            联系支持
          </button>
        </div>

        <div class="version-info">
          <div class="version-card">
            <div class="version-header">
              <i class="fas fa-code-branch"></i>
              <span>当前版本</span>
            </div>
            <div class="version-number">v2.1.0</div>
            <div class="version-date">2024-03-15 更新</div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Terms',
  
  data() {
    return {
      currentSection: 0,
      sections: [
        {
          title: '1. 服务说明',
          content: `
            <h3>1.1 服务范围</h3>
            <p>我们提供以下API服务：</p>
            <ul>
              <li>数据处理API</li>
              <li>内容分发API</li>
              <li>认证授权API</li>
              <li>分析统计API</li>
            </ul>

            <h3>1.2 服务等级</h3>
            <p>我们承诺提供：</p>
            <ul>
              <li>99.9%的服务可用性</li>
              <li>7×24小时技术支持</li>
              <li>实时监控和告警</li>
            </ul>
          `
        },
        {
          title: '2. 使用规则',
          content: `
            <h3>2.1 账户管理</h3>
            <p>用户需要：</p>
            <ul>
              <li>妥善保管账户信息</li>
              <li>遵守API使用限制</li>
              <li>及时更新安全信息</li>
            </ul>

            <h3>2.2 使用限制</h3>
            <p>禁止以下行为：</p>
            <ul>
              <li>超出配额限制的调用</li>
              <li>未经授权的访问</li>
              <li>恶意攻击行为</li>
            </ul>
          `
        },
        {
          title: '3. 计费规则',
          content: `
            <h3>3.1 计费方式</h3>
            <p>我们提供以下计费模式：</p>
            <ul>
              <li>按调用次数计费</li>
              <li>按流量计费</li>
              <li>包年包月</li>
            </ul>

            <h3>3.2 结算周期</h3>
            <p>结算规则：</p>
            <ul>
              <li>月度结算</li>
              <li>预付费模式</li>
              <li>阶梯计费</li>
            </ul>
          `
        },
        {
          title: '4. 服务保障',
          content: `
            <h3>4.1 服务承诺</h3>
            <p>我们承诺：</p>
            <ul>
              <li>保证服务质量</li>
              <li>数据安全保护</li>
              <li>及时响应问题</li>
            </ul>

            <h3>4.2 补偿方案</h3>
            <p>服务中断补偿：</p>
            <ul>
              <li>延长服务时间</li>
              <li>退还相应费用</li>
              <li>提供替代方案</li>
            </ul>
          `
        },
        {
          title: '5. 免责声明',
          content: `
            <h3>5.1 免责范围</h3>
            <p>以下情况我们不承担责任：</p>
            <ul>
              <li>不可抗力因素</li>
              <li>计划内维护</li>
              <li>用户原因导致的问题</li>
            </ul>

            <h3>5.2 责任限制</h3>
            <p>责任范围：</p>
            <ul>
              <li>直接损失赔偿</li>
              <li>间接损失免责</li>
              <li>第三方侵权免责</li>
            </ul>
          `
        }
      ]
    }
  },

  methods: {
    scrollToSection(index) {
      this.currentSection = index;
      const element = document.getElementById(`section-${index}`);
      element.scrollIntoView({ behavior: 'smooth' });
    },

    contactSupport() {
      // 实现联系支持的逻辑
      console.log('Contacting support...');
    }
  },

  mounted() {
    // 监听滚动以更新当前章节
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const sectionId = entry.target.id;
          this.currentSection = parseInt(sectionId.split('-')[1]);
        }
      });
    }, { threshold: 0.5 });

    this.sections.forEach((_, index) => {
      const element = document.getElementById(`section-${index}`);
      if (element) observer.observe(element);
    });
  }
}
</script>

<style scoped>
/* 在最前面添加这些全局重置样式 */
ul, li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.terms-page {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部横幅样式 */
.terms-banner {
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: white;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.banner-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.banner-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.waves {
  width: 100%;
  height: 100%;
}

.wave-group {
  animation: moveWaves 10s linear infinite;
}

@keyframes moveWaves {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 主要内容布局 */
.terms-content {
  max-width: 1400px;
  margin: -50px auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 2rem;
  position: relative;
}

/* 侧边导航栏 */
.terms-sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.terms-nav {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-item {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(66, 133, 244, 0.05);
  color: #4285f4;
}

.nav-item.active {
  background: #4285f4;
  color: white;
}

/* 主要内容区域 */
.terms-main {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.terms-section {
  margin-bottom: 3rem;
}

.terms-section h2 {
  font-size: 2rem;
  background: linear-gradient(135deg, #4285f4, #34a853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e3f2fd;
}

.terms-section h3 {
  font-size: 1.5rem;
  color: #4285f4;
  margin: 2rem 0 1rem;
  position: relative;
  padding-left: 1rem;
}

.terms-section h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #4285f4, #34a853);
  border-radius: 2px;
}

.section-content {
  color: #333;
  line-height: 1.6;
}

.section-content ul {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}

.section-content li {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.section-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  background: #4285f4;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  transition: all 0.3s ease;
}

.section-content li:hover {
  transform: translateX(5px);
  background: rgba(66, 133, 244, 0.05);
  border-radius: 4px;
  padding: 0.5rem 1rem 0.5rem 2rem;
}

.section-content li:hover::before {
  background: #34a853;
  transform: scale(1.2);
}

/* 右侧操作区 */
.terms-actions {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-card h3 {
  font-size: 1.2rem;
  color: #4285f4;
  margin-bottom: 1rem;
}

.action-card p {
  color: #666;
  margin-bottom: 1.5rem;
}

.action-card button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #4285f4;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.action-card button:hover {
  background: #3367d6;
  transform: translateY(-2px);
}

.version-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.version-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  margin-bottom: 1rem;
}

.version-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4285f4;
  margin-bottom: 0.5rem;
}

.version-date {
  color: #666;
  font-size: 0.9rem;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .terms-content {
    grid-template-columns: 200px 1fr;
  }
  
  .terms-actions {
    display: none;
  }
}

@media (max-width: 768px) {
  .terms-content {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  
  .terms-sidebar {
    display: none;
  }
  
  .banner-content h1 {
    font-size: 2rem;
  }
}
</style> 